import React from "react";
import ExportToExcel from "./Excel";
import { Lineoption } from "./ChartData";
import CustomerChart from "../../components/Chart";
import {
  Select,
  Radio,
  DatePicker,
  DatePickerProps,
  Table,
  Button,
  Dropdown
} from "antd";

interface DataType {
  key: React.Key;
  // 商品分类名称
  shopCategory: string;
  // 总销量
  Totalsales: number;
  // 总销售额
  totalPrice: number;
  // 销售占比
  salesZhanbi: number;
  // 销售额占比
  priceZhanbi: number;
  // 美团销量
  meituanSales: number;
  // 美团销售额
  meituanPrice: number;
  // 饿了么销量
  elemeSales: number;
  // 饿了么销售
  elemePrice: number;
}

const columns = [
  // 商品分类名称
  {
    title: "商品分类",
    dataIndex: "shopCategory",
    key: "shopCategory",
  },
  // 总销量
  {
    title: "总销量",
    dataIndex: "Totalsales",
    key: "Totalsales",
  },
  // 总销售额
  {
    title: "总销售额",
    dataIndex: "totalPrice",
    key: "totalPrice",
  },
  // 销售占比
  {
    title: "销售占比",
    dataIndex: "salesZhanbi",
    key: "salesZhanbi",
  },
  // 销售额占比
  {
    title: "销售额占比",
    dataIndex: "priceZhanbi",
    key: "priceZhanbi",
  },
  // 美团销量
  {
    title: "美团销量",
    dataIndex: "meituanSales",
    key: "meituanSales",
  },
  // 美团销售额
  {
    title: "美团销售额",
    dataIndex: "meituanPrice",
    key: "meituanPrice",
  },
  // 饿了么销量
  {
    title: "饿了么销量",
    dataIndex: "elemeSales",
    key: "elemeSales",
  },
  // 饿了么销售
  {
    title: "饿了么销售",
    dataIndex: "elemePrice",
    key: "elemePrice",
  },
];
const data: DataType[] = [
  {
    key: "1",
    // 商品分类名称
    shopCategory: "饮料",
    // 总销量
    Totalsales: 100,
    // 总销售额
    totalPrice: 1000,
    // 销售占比
    salesZhanbi: 0.5,
    // 销售额占比
    priceZhanbi: 0.5,
    // 美团销量
    meituanSales: 100,
    // 美团销售额
    meituanPrice: 55,
    // 饿了么销量
    elemeSales: 40,
    // 饿了么销售
    elemePrice: 85,
  },
  {
    key: "2",
    // 商品分类名称
    shopCategory: "酒水",
    // 总销量
    Totalsales: 100,
    // 总销售额
    totalPrice: 1000,
    // 销售占比
    salesZhanbi: 0.5,
    // 销售额占比
    priceZhanbi: 0.5,
    // 美团销量
    meituanSales: 46,
    // 美团销售额
    meituanPrice: 35,
    // 饿了么销量
    elemeSales: 36,
    // 饿了么销售
    elemePrice: 42,
  },
  {
    key: "4",
    // 商品分类名称
    shopCategory: "炸鸡",
    // 总销量
    Totalsales: 100,
    // 总销售额
    totalPrice: 1000,
    // 销售占比
    salesZhanbi: 0.5,
    // 销售额占比
    priceZhanbi: 0.5,
    // 美团销量
    meituanSales: 100,
    // 美团销售额
    meituanPrice: 1000,
    // 饿了么销量
    elemeSales: 26,
    // 饿了么销售
    elemePrice: 1000,
  },
];
export default function ShopCate() {
  // 导出数据的方法



  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const onChange: DatePickerProps["onChange"] = (date, dateString) => {
    console.log(date, dateString);
  };
  return (
    <div className="relative">
      {/* absolute top-0 left-0 w-full h-full bg-white opacity-50 z-10 */}
      <div className="w-[90%] absolute h-15 m-auto left-20 top-5 ml-10 text-center  bg-white  rounded shadow-sm">
        <Select
          className="w-35 h-10 ml-3 mt-3 "
          defaultValue="所有品牌"
          onChange={handleChange}
          options={[
            { value: "所有品牌", label: "所有品牌" },
            { value: "KFC", label: "KFC" },
            { value: "麦当劳", label: "麦当劳" },
          ]}
        />
        {/* 分区 */}
        <Select
          className="w-35 h-10 ml-3 "
          defaultValue="默认分区"
          onChange={handleChange}
          options={[
            { value: "默认分区", label: "默认分区" },
            { value: "A区", label: "A区" },
            { value: "B区", label: "B区" },
          ]}
        />
        {/* 店铺 */}
        <Select
          className="w-45 h-10 ml-5"
          defaultValue="全部店铺"
          onChange={handleChange}
          options={[
            { value: "全部店铺", label: "全部店铺" },
            { value: "肯德基总店", label: "肯德基总店" },
            { value: "麦当劳总店", label: "麦当劳总店" },
            { value: "肯德基分店", label: "肯德基分店" },
          ]}
        />
        {/* 来源 */}
        <Select
          className="w-40 h-10 ml-5"
          defaultValue="全部来源"
          onChange={handleChange}
          options={[
            { value: "全部来源", label: "全部来源" },
            { value: "美团", label: "美团" },
            { value: "饿了么", label: "饿了么" },
          ]}
        />
        <Radio.Group
          className="w-60 h-8  "
          // size="large"
          defaultValue="a"
          buttonStyle="solid"
        >
          <Radio.Button value="a">今日</Radio.Button>
          <Radio.Button value="b">近7日</Radio.Button>
          <Radio.Button value="c">近30日</Radio.Button>
        </Radio.Group>
        <DatePicker onChange={onChange} className="w-60 h-10" />
        <button className="w-18 h-9 ml-5 bg-blue-500 text-white rounded hover:bg-blue-600 border-none">
          筛选
        </button>
      </div>
      <div className="w-[90%] absolute  h-115 m-auto ml-30 top-25  bg-white  rounded shadow-sm">
        <p
          style={{ fontSize: "15px", fontWeight: "bold", paddingLeft: "15px" }}
        >
          分类销售分析
        </p>
        <hr />

        <div className="w-300 h-100  m-auto ">
          <CustomerChart width={1200} height={400} options={Lineoption} />
        </div>
      </div>
      <div className="w-[90%] absolute  h-180 m-auto ml-30 top-145  bg-white  rounded shadow-sm">
        <p
          style={{ fontSize: "15px", fontWeight: "bold", paddingLeft: "15px" }}
        >
          商品分类销售统计明细
        </p>
        <span className="absolute right-10 top-2">
          <Button>
            <Dropdown>
              <ExportToExcel  data={data} fileName="商品分类销售统计明细">
                <Button>导出</Button>
              </ExportToExcel>
            </Dropdown>
          </Button>
        </span>
        <hr />

        <div>
          <Table
            columns={columns}
            dataSource={data}
            rowKey={(record) => record.key}
            pagination={{
              pageSize: 5,
            }}
          />
        </div>
      </div>
    </div>
  );
}
